<template>
  <HeadContainer class="mine-settings" :title="$t('title.setting')" @back="back">
    <div class="gap-col-24">
      <div @click="navigate(`username-email`)" class="gap-col-24 mine-list pointer">
        <div class="d-flex justify-space-between w-100 align-center">
          <div class="d-flex align-center">
            <Icon class="me-2" name="profile"></Icon>
            {{ $t('title.usnMail') }}
          </div>
          <Icon class="ms-2" name="arrowRight"></Icon>
        </div>
      </div>
      <div @click="navigate(`password`)" class="gap-col-24 mt-4 mine-list pointer">
        <div class="d-flex justify-space-between w-100 align-center">
          <div class="d-flex align-center">
            <Icon class="me-2" name="password"></Icon>
            {{ $t('title.password') }}
          </div>
          <Icon class="ms-2" name="arrowRight"></Icon>
        </div>
      </div>
      <div @click="navigate(`gender-preferences`)" class="gap-col-24 mt-4 mine-list pointer">
        <div class="d-flex justify-space-between w-100 align-center">
          <div class="d-flex align-center">
            <Icon class="me-2" name="user3"></Icon>
            {{ $t('title.prefer') }}
          </div>
          <Icon class="ms-2" name="arrowRight"></Icon>
        </div>
      </div>
      <div @click="navigate(`blocked-accounts`)" class="gap-col-24 mt-4 mine-list pointer">
        <div class="d-flex justify-space-between w-100 align-center">
          <div class="d-flex align-center">
            <Icon class="me-2" name="union"></Icon>
            {{ $t('title.blockAcc') }}
          </div>
          <Icon class="ms-2" name="arrowRight"></Icon>
        </div>
      </div>
      <div @click="navigate(`delete-account`)" class="gap-col-24 mt-4 mine-list pointer">
        <div class="d-flex justify-space-between w-100 align-center">
          <div class="d-flex align-center">
            <Icon class="me-2" name="deleteAcc"></Icon>
            {{ $t('title.delAcc') }}
          </div>
          <Icon class="ms-2" name="arrowRight"></Icon>
        </div>
      </div>
      <div @click="navigate(`mail-verify`)" class="gap-col-24 mt-4 mine-list pointer">
        <div class="d-flex justify-space-between w-100 align-center">
          <div class="d-flex align-center">
            <Icon class="me-2" name="message"></Icon>
            <div>
              {{ $t('title.mailVerify') }}
            </div>
            <div v-if="mailAlertCount" class="tag ml-2 bg-primary font-size-10 font-weight-500 line-height-120">
              {{ mailAlertCount }}
            </div>
          </div>
          <Icon class="ms-2" name="arrowRight"></Icon>
        </div>
      </div>
      <Link v-if="userData.is_bind_email" href="/mine/settings/notify-letter" @click="navRouter(`notify-letter`)">
        <div class="gap-col-24 mt-4 mine-list pointer text-white">
          <div class="d-flex justify-space-between w-100 align-center">
            <div class="d-flex align-center">
              <Icon class="me-2" name="bell"></Icon>
              <div>
                {{ $t('title.notifyLetter') }}
              </div>
            </div>
            <Icon class="ms-2" name="arrowRight"></Icon>
          </div>
        </div>
      </Link>
    </div>
  </HeadContainer>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { $t } from '@/i18n'
import Link from '@/components/common/Link.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'

const emits = defineEmits(['toPage', 'back'])
const router = useRouter()

function navigate(to) {
  emits('toPage', to)
}

function navRouter(to) {
  emits('toPage', to)
  router.replace({ path: `settings/${to}` })
}

function back() {
  emits('back')
  router.replace({ name: 'mine' })
}

const accountStore = useAccountStore()
const { userData } = storeToRefs(accountStore)
const mailAlertCount = computed(() => {
  return userData.value.is_bind_email ? '' : '1'
})
console.log('userData.value.is_bind_email:', userData.value.is_bind_email)
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
  color: black;
}
.tag {
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
